<!--  -->
<template>
  <div>
    <header>
      <van-nav-bar
        title="体检加项"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
    </header>
    <div class="title">
      根据您选择的套餐，推荐您增加以下体检项目：
    </div>

    <template v-for="(item, index) in arr">
      <div class="ti1" :key="item.id">
        <input type="checkbox" @change="clickFn(item, index)" />
        <p class="ti2 til9">
          {{ item.productId }}
        </p>
        <ul>
          <li class="til5">{{ item.productName }}</li>
          <li class="til8">{{ item.sex }}</li>
        </ul>
        <div class="til6" @click="dialog">
          详情
        </div>
      </div>
    </template>
    <footer>
      <span @click="spano">跳过</span>
      <span @click="spano">确定</span>
    </footer>
  </div>
</template>

<script>
import Vue from "vue";
import { Col, Row } from "vant";
// Dialog({ message: '提示' });
import { Dialog } from "vant";
import axios from "axios";
export default {
  data() {
    return {
      arr_2 : [],
      arr: [],
      ff: true,
    };
  },
  methods: {
    onClickLeft() {
      this.$router.push("./Package");
    },
    spano() {
      this.$router.push("./PayPage");
    },
    dialog() {
      Dialog.alert({
        title: "脑部CT",
        message: "检查范围、CT、检查意义、检查脑部",
      }).then(() => {
        // on close  点击确定触发的事件在这里面写
      });
    },
    clickFn(e, item, index) {
      
      if (this.arr_2.indexOf(e) === -1) {
        //插入数组
        this.arr_2.push(e)
      } else {
        let index_2 = this.arr_2.indexOf(e)

        this.arr_2.splice(index_2,1)
      }
      console.log(this.arr_2);
      // console.log(e)
      // console.log(item, index);
    },
  },

  //   components: {},

  async mounted() {
    let url = "http://localhost:8080/admin";
    let res = await axios.get(url);
    // console.log(res.data.result)
    this.arr = res.data.result;
  },

  //   methods: {}
};
</script>
<style lang="scss" scoped>
footer {
  width: 100%;
  height: 40px;

  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  border: 1px solid #00cccc;
}
footer span {
  display: block;
  width: 160px;
  height: 40px;

  text-align: center;
  line-height: 40px;
}
footer span:nth-of-type(1) {
  color: #00cccc;
}
footer span:nth-of-type(2) {
  background: #00cccc;
  color: white;
}
header {
  width: 100%;
  height: 44px;
  background: pink;
}
.title {
  width: 350px;
  height: 40px;
  font-size: 16px;
  text-align: center;
  margin: auto;
}
.ti1 {
  width: 320px;
  height: 63px;
  border-bottom: 1px solid #c0c0c0;
  margin: auto;
  position: relative;
}
.ti2 {
  width: 219px;
  height: 16px;
  font-size: 12px;
  line-height: 16px;
  margin-left: 28px;
  margin-top: -22px;
}
.ti1 ul {
  height: 16px;

  font-size: 16px;
  display: flex;
  line-height: 16px;
  margin-left: 28px;
}
.til5 {
  margin-right: 60px;
  margin-top: 14px;
}
.til6 {
  width: 40px;
  height: 20px;
  position: absolute;
  right: 14px;
  top: 24px;
  text-align: center;
  color: #00cccc;
}
.til8 {
  margin-top: 14px;
  font-size: 12px;
}
</style>
